@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:100,300,400,600";
@import "https://fonts.googleapis.com/css?family=Noto+Serif+SC:100,300,400,600";
@import "https://fonts.googleapis.com/css?family=Noto+Serif+SC:400,700&display=swap&subset=chinese-simplified";

*{
    padding: 0 ;
    margin: 0 ;
    font-family: "Noto Serif SC","HiraMinProN-W6","Source Han Serif CN","Source Han Serif SC","Source Han Serif TC",serif;
}
body{
    &::before{
        content:"" ;
        display: block;
        width: 100vw ;
        height: 100vh ;
        background: url("../img/bg-7.png") no-repeat;
        background-size:cover;
    }
    .lightCover{
        position:fixed;
        top: 0px;
        left: 0px;
        outline:5000px solid rgba(0, 0, 0, 0);//³õÊ¼ÁÁ¶È
        z-index: 1 !important;
    }
}
.canvas1,.canvas2{
    position: fixed;
    width: 100vw ;
    height: 50vh ;
    background: rgba(0, 0, 0, 0.9);
    transition: 0.9s ;
    box-sizing: border-box;
}
.canvas1{
    top: 0 ;
}
.canvas2{
    bottom: 0 ;
}
.wave{
  position:fixed;
  top:calc((100% - 30px)/2);
  left:calc((100% - 30px)/2);
  width:30px;
  height:30px;
  border-radius:300px;
  background:url("../img/bg-7-1.png");
  background: rgba(250, 177, 160,0.1 ) ;
  opacity: 0.1 ;
  background-attachment:fixed;
  background-position:center center;
  transform: rotateX(75deg);
  filter: blur(80px);

}
.light-bg{
    position: fixed;
    width: 150px ;
    height: 80px ;
    margin-left: -75px ;
    margin-top: -35px ;
    left: 50vw ;
    top: 50vh ;
    
    border-radius: 50% ;
    border-bottom-left-radius: 0 ;
    border-bottom-right-radius: 0 ;
    background:  radial-gradient( rgba(250, 177, 160,1.0) , transparent 70%); 
    transform: rotateX(60deg);
    filter: blur(20px);
}
.sakura{
    position: fixed;
    width: 110px ;
    height: 100px ;
    left: 50vw ;
    top: 50vh ;
    margin-left: -55px ;
    margin-top: -50px ;
    background-image: url("../img/sakura_single.png");
    background-size:contain ;
    background-repeat:no-repeat;
    z-index: 2 ;
    cursor: pointer; 
}
.premise{
    display: inline-block;
    position: fixed;
    top: 60% ;
    left: 50% ;
    margin-left: -116px ;
    font-size: 34px ;
    font-weight: 900 ;
    letter-spacing: 1.3px ;
    transform: scale(0.9,1.1);
    //拉高字体
    color: #f7fcfe ;
    user-select: none; 
    background-image:linear-gradient(45deg,#203744 ,#f7fcfe 40px,#f7fcfe 70%, #9ea1a3 ); 
    -webkit-background-clip:text; 
    background-clip:text; 
    -webkit-text-fill-color:transparent; 
    cursor:pointer;
    &::before{
      content:"——";
      display: inline-block;
      position: absolute;
      height: 2em ;
      width: auto;
      left: -100px ;
      font-size: 34px ;
      font-weight: 900 ;
      background-image:linear-gradient(90deg,#f7fcfe ,#fdeff2 ); 
      -webkit-background-clip:text; 
      background-clip:text; 
      opacity: 1 ;
    }
    &::after{
      content:"——";
      display: inline-block;
      position: absolute;
      height: 2em ;
      width: auto;
      right: -100px ;
      font-size: 34px ;
      font-weight: 900 ;
      background-image:linear-gradient(-90deg,#f7fcfe ,#fdeff2 ); 
      -webkit-background-clip:text; 
      background-clip:text; 
      opacity: 1 ;
    }
}

main{
  position: fixed;
  left: 0 ;
  top: 0 ;
  box-sizing: border-box;
  z-index: 5 ;
  margin: 0 ;
  padding: 0 ;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh ;
  width: 100vw ;
  transition: 0.9s ;
  transform: scale(0);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  .box{
    position: relative;
    width: 230px ;
    height: 400px ;
    background: transparent; ;
    transform: rotate(-48deg) skewY(25deg) scale(0.6);
    transition: 0.5s ;
    box-shadow: -25px 40px 4px rgba(0,0,0,0.2) ;
    opacity: 0 ;
    display: flex;
    flex-direction: row;
    .glass{
      position: absolute;
      top: 0 ;
      left: 0 ;
      width: 100% ;
      height: 100% ;
      background: rgba(255,255,255,0.001);
      //box-shadow:  0 0 10px rgba(99, 110, 114,0.2) ;
      transition: 0.5s ;
      overflow: hidden;
      &::before{
        content:"";
        position: absolute;
        top: 0 ;
        left: -50% ;
        width: 100% ;
        height: 100% ;
        background: rgba(0,0,0,0.005) ;
        transform: skewX(0deg);
      }
    }
    &:hover{
        transform: rotate(-48deg) skewY(25deg) scale(0.6) translate(20px,-20px);
        box-shadow: -60px 100px 6px rgba(0,0,0,0.05) ;
        .glass{
          top: -40px ;
          left: 30px ;
          background: rgba(255,255,255,0.05);
          box-shadow: -2px 2px 10px rgba(0,0,0,0.2) ;
        }
        .glass:nth-child(2){
          top: -80px ;
          left: 60px ;
          background: rgba(255,255,255,0.05);
          box-shadow: -2px 2px 10px rgba(0,0,0,0.2) ;
        }
    }
    &::before{
      content: "" ;
      position: absolute;
      top: 0 ;
      left: -5.5px ;
      height: 100% ;
      width: 6px ;
      box-sizing: border-box;
      //border-top: 80px solid #ad3c3c ;
      background: #fdeff2 ;
      transform-origin: right;
      transform: skewY(-58deg) ;
      
    }
    &::after{
      content: "" ;
      position: absolute;
      bottom: -9.5px ;
      left: 0px ;
      height: 10px ;
      width: 100% ;
      box-sizing: border-box;
      //border-top: 80px solid #ad3c3c ;
      background: #e4d2d8 ;
      transform-origin: top;
      transform: skewX(-32deg) ;
    }
  }
  .card-fake{
    position: absolute;
    width: 100% ;
    height: 100% ;
    background: rgba(245, 246, 250,1.0) ;
    z-index: -1 ;
    border-radius: 10px ;
    transition: 0.3s ;
    transform-origin: left;

  }
  .card{
    position: absolute;
    width: 100% ;
    height: 100% ;
    color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    user-select: none;
    overflow: hidden;
    background: #fff ;
    transition: 0.5s ;
    .card-title{
      position: relative;
      font-size: 28px ;
      font-weight: 900 ;
      letter-spacing: 1.3px ;
      text-shadow: 0px 0px 5px rgba(99, 110, 114,0.5) ;
    }
    .discript{
      text-align: center;
      margin-top: 20px ;
      font-size: 12px ;
      line-height: 2em ;
      text-shadow: 0px 0px 5px rgba(99, 110, 114,0.2) ;
    }
    span{
      position: absolute;
      background: #ffffff ;
      transform: translate(-50%,-50%);
      pointer-events: none;
      border-radius: 50% ;
      animation: sp-float 1s linear infinite ;
    }
  }
  form{
    position: absolute;
    width: 160% ;
    height: 100% ;
    left: 100% ;
    padding-top: 60px ;
    box-sizing: border-box;
    background: rgba(245, 246, 250,1.0) ;
    transition: 0.5s ;
    transform-origin: left;
    transform: scaleX(0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: auto;
    -ms-overflow-style: none;
    scrollbar-width:none;
    &::-webkit-scrollbar {display:none;}
    .inputBox{
        position: relative;
        width: 75% ;
        margin-top: 10px ;
        transform-style:preserve-3d;
        input,textarea{
            background: transparent;
            position: relative;
            width: 100% ;
            padding: 5px 0 ;
            padding-bottom: 0 ;
            font-size: 12px ;
            line-height: 16px ;
            margin: 10px 0 ;
            border:none;
            //border-bottom: 2px solid #333 ;
            outline: none;
            resize: none;
        }
        &::before{
          content:"";
          position: absolute;
          bottom: -0px ;
          height: 2px ;
          width: 100% ;
          background: #2d3436 ;
        }
        &::after{
          content:"";
          position: absolute;
          bottom: -0px ;
          height: 2px ;
          width: 100% ;
          transition: 0.3s ;
          transform-origin: center;
          transform: scaleX(0);
          background: rgba(0, 184, 148,1.0) ;
        }
        textarea{
            height: 100px ;
        }
        span{
            position: absolute;
            left: 0 ;
            top: 0 ;
            padding: 5px 0 ;
            font-size: 14px ;
            margin: 10px 0 ;
            transition: 0.5s ;
            color: #666 ;
            user-select: none;
            z-index: -1 ;
        }
        & input:focus ~ span,
        & input:valid ~ span,
        & textarea:focus ~ span,
        & textarea:valid ~ span{
            color: #e91e63 ;
            font-size: 12px ;
            transform: translateY(-20px);
        }
        &:hover::after{
            transform: scaleX(1);
        }
    }
    .my-login{
      margin-top: 50px ;
      min-height: 40px;
      width: 50% ;
      font-size: 14px;
      letter-spacing: 1.5px ;
      font-weight: 400 ;
      border-radius: 20px ;
      border: 1.5px solid #e17055 ;
      background: transparent;
      cursor: pointer;
      transition: 0.3s ;
      font-family: "Josefin Sans Light",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","'Hiragino Sans GB",STHeiti,"Microsoft Yahei","Source Han Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",Arial,Verdana,sans-serif;
      &:hover{
        background:rgba(225, 112, 85,1);
        color: rgba(245, 246, 250,1.0) ;
        box-shadow: 0px 0px 10px rgba(250, 177, 160,1.0);
      }
    }
    .my-regis{
      margin-top: 50px ;
      min-height: 40px;
      width: 50% ;
      font-size: 14px;
      letter-spacing: 1.5px ;
      font-weight: 400 ;
      border-radius: 20px ;
      border: 1.5px solid #5cb3cc ;
      background: transparent;
      cursor: pointer;
      transition: 0.3s ;
      font-family: "Josefin Sans Light",-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","'Hiragino Sans GB",STHeiti,"Microsoft Yahei","Source Han Sans SC","Noto Sans CJK SC","WenQuanYi Micro Hei",Arial,Verdana,sans-serif;
      &:hover{
        background:#5cb3cc;
        color: rgba(245, 246, 250,1.0) ;
        box-shadow: 0px 0px 10px #126e82;
      }
    }
    .form-placeholder{
      flex: 0 auto ;
      min-height: 20% ;
      width: 100% ;
    }
  }
  .login-form{
    z-index: 0 ;
  }
  .regis-form{
    z-index: -1 ;
  }
}
.main-show{
  min-height: 100vh !important ;
  height: 100vh !important ;
  width: 100vw !important ;
  transform: scale(1) !important ;
}


///////////////////////////////////////////////////////
.box-change{
  transform: rotate(0deg) skewY(0deg) !important;
  transform: translateX(-80%) !important;
  box-shadow: 0px 0px 10px rgba(99, 110, 114,1.0) !important ;
  border-top-left-radius: 10px ;
  border-bottom-left-radius: 10px ;
}
.card-fake-change{
  width: 260% !important ;
  box-shadow: 0px 0px 10px rgba(99, 110, 114,1.0) !important ;
}
.card-regis-change{
  background-image:linear-gradient(125deg,#ffeaa7,rgba(250, 177, 160,1.0),rgba(255, 118, 117,1.0) 35% ,#b0d5df, #8abcd1,#51c4d3,#1ba784) !important;
  color: #fef4f4 !important ;
  background-repeat: no-repeat !important;
  background-size: 300% !important;
  transform: translateX(160%) !important;
  border-top-right-radius: 10px ;
  border-bottom-right-radius: 10px ;
  background-position: 100% 100%  !important;
  z-index: 1 ;
}
.card-login-change{
  background-image:linear-gradient(125deg,#ffeaa7,rgba(250, 177, 160,1.0),rgba(255, 118, 117,1.0) 50% , #8abcd1,#51c4d3,#1ba784) !important;
  color: #fef4f4 !important ;
  background-repeat: no-repeat !important;
  background-size: 300% !important;
  background-position: 0 0 !important;
  border-top-left-radius: 10px ;
  border-bottom-left-radius: 10px ;
  z-index: 1 ;
}
.form-show{
  transform: scaleX(1) !important;
  border-radius: 0 ;
  border-top-right-radius: 10px ;
  border-bottom-right-radius: 10px ;
  left: 100% ;
}
.form-move{
  left: 0% ;
  border-radius: 0 ;
  border-top-left-radius: 10px ;
  border-bottom-left-radius: 10px ;
}
.box-show{
  opacity: 1 !important;
}
.box-use{
  transform: perspective(1000px) rotateZ(0deg) rotateX(0deg) rotateY(0deg);
  box-shadow: -25px 40px 4px rgba(0,0,0,0.2) ;
}

.hiddenToTop{
  transform: translateY(-100%) !important;
}
.hiddenToBottom{
  transform: translateY(100%) !important;
}

.float-Sakura{
  animation-name: floatSakura ;
  animation-duration: 3s ;
  animation-iteration-count: infinite;
  animation-direction:alternate;
  animation-timing-function:ease-out;
  animation-play-state: running;
}
.scale-Sakura{
  animation-name: scaleSakura ;
  animation-duration: 3s ;
  animation-iteration-count: infinite;
  animation-direction:alternate;
  animation-timing-function:ease-out;
  animation-play-state: running;
}
@keyframes sp-float{
  0%{
    width: 0% ;
    height: 0% ;
    opacity: 0.5 ;
  }
  100%{
    width: 1000px ;
    height: 1000px ;
    opacity: 0 ;
  }
}

@keyframes floatSakura{
  0%{transform: translateY(0);}
  50%{transform: translateY(-20%);}
  70%{transform: translateY(-30%);}
  100%{transform: translateY(-40%);}
}
@keyframes scaleSakura{
  0%{
    width: 150px ;
    height: 80px ;
    margin-left: -75px ;
    margin-top: -35px ;
  }
  50%{
    width: 120px ;
    height: 64px ;
    margin-left: -60px ;
    margin-top: -32px ;
  }
  70%{
    width: 105px ;
    height: 56px ;
    margin-left: -52.5px ;
    margin-top: -28px ;
  }
  100%{
    width: 90px ;
    height: 48px ;
    margin-left: -45px ;
    margin-top: -24px ;
  }
}
.wrench-use{
  -webkit-animation:wrench 8s ease infinite;
 animation:wrench 8s ease infinite;
 transform-origin:60% 70%;
 animation-play-state: running;
}
@-webkit-keyframes wrench {
 0% {
  -webkit-transform:rotate(-4deg);
  transform:rotate(-4deg)
 }
 4% {
  -webkit-transform:rotate(4deg);
  transform:rotate(4deg)
 }
 10% {
  -webkit-transform:rotate(8deg);
  transform:rotate(8deg)
 }
 18%,
 20% {
  -webkit-transform:rotate(-8deg);
  transform:rotate(-8deg)
 }
 28%,
 30% {
  -webkit-transform:rotate(8deg);
  transform:rotate(8deg)
 }
 38%,
 40% {
  -webkit-transform:rotate(-8deg);
  transform:rotate(-8deg)
 }
 48%,
 50% {
  -webkit-transform:rotate(8deg);
  transform:rotate(8deg)
 }
 58%,
 60% {
  -webkit-transform:rotate(-8deg);
  transform:rotate(-8deg)
 }
 68% {
  -webkit-transform:rotate(8deg);
  transform:rotate(8deg)
 }
 100%,
 75% {
  -webkit-transform:rotate(0);
  transform:rotate(0)
 }
}
@keyframes wrench {
 0% {
  -webkit-transform:rotate(-4deg);
  -ms-transform:rotate(-4deg);
  transform:rotate(-4deg)
 }
 8% {
  -webkit-transform:rotate(4deg);
  -ms-transform:rotate(4deg);
  transform:rotate(4deg)
 }
 10% {
  -webkit-transform:rotate(8deg);
  -ms-transform:rotate(8deg);
  transform:rotate(8deg)
 }
 18%,
 20% {
  -webkit-transform:rotate(-8deg);
  -ms-transform:rotate(-8deg);
  transform:rotate(-8deg)
 }
 28%,
 30% {
  -webkit-transform:rotate(8deg);
  -ms-transform:rotate(8deg);
  transform:rotate(8deg)
 }
 38%,
 40% {
  -webkit-transform:rotate(-8deg);
  -ms-transform:rotate(-8deg);
  transform:rotate(-8deg)
 }
 48%,
 50% {
  -webkit-transform:rotate(8deg);
  -ms-transform:rotate(8deg);
  transform:rotate(8deg)
 }
 58%,
 60% {
  -webkit-transform:rotate(-8deg);
  -ms-transform:rotate(-8deg);
  transform:rotate(-8deg)
 }
 68% {
  -webkit-transform:rotate(8deg);
  -ms-transform:rotate(8deg);
  transform:rotate(8deg)
 }
 100%,
 75% {
  -webkit-transform:rotate(0);
  -ms-transform:rotate(0);
  transform:rotate(0)
 }
}
